<template>
  <div>
    <Order-Header title="我的订单"></Order-Header>
    <div class="orderMain" id="transitionName">
      <!-- <div class="order-box2"> -->
          <div class="wrapper" ref="wrapper">
            <div class="conntent">
                <div class="content-list" v-for="(list,index) in order" :key="index" @click='go_orderView(list)'>
                     <div class="_order">
                        <p class="left">订单号：{{list.number}}&nbsp;&nbsp;&nbsp;已完成</p>

                        <p class="right">
                            <img
                            style="width:0.7rem;height:0.7rem"
                            src=""
                            alt
                            >
                        </p>
                        </div>
                        <div class="order">
                        <img src="http://www.vivo-admin.com/static/image/5cd6e6221bed6.png">

                        <div class="order-div">
                            <h3>{{list.shop_name}}</h3>
                            <!-- <p class="order-div-color">颜色:不详</p> -->
                            <p class="order-div-price">￥{{list.shop_price}}</p>
                        </div>
                        <div class="order-div-2">× 1</div>
                        </div>
                        <div class="order-2">
                        <div class="order-2-box">
                            <p class="order-2-one">
                            应付金额：
                            <span>￥{{list.shop_price}}</span>
                            </p>
                        </div>
                        </div>
                </div>
               
             


            </div>
          <!-- </div> -->
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState, mapMutations, mapGetters } from "vuex";
import OrderHeader from "../../common/Header";
import BScroll from "better-scroll";
import { setCookie, getCookie } from "../../assets/js/cookie.js";
import { user_order } from "../../assets/js/api.js";
import axios from "axios";
export default {
  name: "oerder",
  data() {
    return {
      order:[]
    };
  },
  components: {
    OrderHeader
  },
  computed: {
    orders() {
      return this.$store.state.orders;
    }
  },
  methods: {
    ...mapMutations(["odefault"]),
    btn(num) {
      this.nowIndex = num;
    },
    go_orderView(list){
      this.$router.push({
        path:'orderView',
        query:{
          number:list.number
        }
      })
    },
    async get_order() {
      let cookier_token = getCookie("token");
      console.log(cookier_token)
      axios({
        url: user_order,
        method: "post",
        params: {
          token: cookier_token
        }
      })
        .then(res => {
         this.order=res.data.order
        })
        .catch(err => {
          //异常操作
        });
    },
  },
  mounted() {
    this.$nextTick(() => {
      this.scroll = new BScroll(this.$refs.wrapper, {
        click: true,
        scrollY: true,
        scrollbar: {
          // fade:false //显示滚动条
          fade: true //不显示滚动条
        }
      });
    });
  },
  created(){
     this.get_order()
  }
};
</script>


<style lang="stylus" scoped>
.orderMain {
    height: 17rem;
    // background: #ff0;
    overflow: hidden;
    position: relative;
    top: 1.7rem;
}
.conntent{
    // width 100%;
    // height 100%;
}

.order-box {
  height: 1rem;
  background: white;
  position: fixed;
  width: 100%;
  border-bottom: 1px solid #f0f0f0;
}

.order-box .active {
  color: #199cfe;
  border-bottom: 2px solid #199cfe;
}

.order-box p {
  width: 25%;
  height: 100%;
  line-height: 1rem;
  float: left;
  text-align: center;
}

.order-box p {
  width: 50%;
  height: 100%;
  font-size: 0.36rem;
  display: block;
  margin: auto;
}

.order-box p a {
  width: 50%;
  height: 100%;
  font-size: 0.36rem;
  display: block;
  margin: auto;
}

.order-box2 {
  width: 100%;
  height 12rem;
//   margin-top: 1rem;
//   background yellow
}

.orders {
  margin-top: 10px;
}

._order {
  width: 100%;
  height: 1.3rem;
  line-height: 1.3rem;
  background: #ffffff;
}

.left {
  float: left;
  color: #666;
  margin-left: 0.5rem;
  font-size: 0.35rem;
}

.orders i {
  font-size: 0.4rem;
  color: #666;
}

.right {
  float: right;
  color: rgb(0, 172, 255);
  margin-right: 0.3rem;
  font-size: 0.35rem;
}

.order {
  width: 100%;
  height: 3rem;
  background: white;
  border-bottom: 1px solid #f0f0f0;
  border-top: 1px solid #f0f0f0;
}

.order img {
  float: left;
  margin: 0.3rem;
  height: 2.5rem;
}

.order-div {
  width: 4rem;
  margin: 0.3rem;
  line-height: 0.7rem;
  float: left;
}

.order h3 {
  font-size: 0.5rem;
}

.order-div-price {
  color: red;
  font-size: 0.4rem;
}

.order-div-2 {
  display: inline-block;
  float: right;
  margin: 0.3rem 0.6rem;
  font-size: 0.4rem;
}

.order-2 {
  width: 100%;
  height: 1.4rem;
  background: white;
}

.order-2-box {
  width: 50%;
  float: right;
  text-align: right;
  margin: 0.2rem 0.4rem;
}

.order-2-zero {
  float: left;
  font-size: 0.35rem;
  margin-left: 0.5rem;
}

.order-2-zero span {
  color: red;
}

.order-2-one {
  font-size: 0.35rem;
  height: 100%;
}

.order-2-one span {
  color: red;
}

.order-2-two {
  color: #666;
  padding-top: 0.2rem;
  font-size: 0.35rem;
}

.order-3 {
  width: 100%;
  height: 1.1rem;
  background: white;
}

.order-3 a {
  width: 2.8rem;
  height: 0.7rem;
  line-height: 0.7rem;
  border: 1px solid red;
  border-radius: 3px;
  text-align: center;
  display: block;
  float: right;
  margin-right: 0.3rem;
  margin-top: 0.1rem;
  border: 1px solid #dcdcdc;
  font-size: 0.3rem;
}

.wrapper-father {
  width: 100%;
  height: 100%;
//   background: yellow;
}

.wrapper {
  height: 100%;
//   overflow: hidden;
//   padding-bottom: 50px;
}
.content-list{
    width 100%;
    height auto;
    background red;
    margin-bottom 0.3rem  
}
</style>

